Summary

Replaces the embed loading skeleton with the interview's real chrome, rendered while the iframe loads:

• The research's scene image — fetched from {host}/interview/{researchId}/scene-image — painted full-bleed behind the card. Applied only after the image actually loads, layered over the app's default surface color (#f5f2f0 light / #15171e dark / custom brand.bg), so a research with no scene (404), a slow network, or a blocked request degrades to a clean solid color.
• A frosted translucent card (55% panel + backdrop-filter: blur(22px), matching the interview app's card treatment).
• The animated Perspective mark (30px) centered in the card — the app's LogoSymbol geometry and timing (official colors, side bars swelling deeper than the center, dots easing down, opacity pulses, right side offset half a cycle), driven by CSS keyframes rather than SMIL: dynamically-inserted SMIL is unreliable in Chromium, and as essential loading motion the mark is not disabled by prefers-reduced-motion (an OS-level animation toggle would otherwise leave a static logo that reads as broken).
• Scene prefetch on intent: new prefetchSceneImage(researchId, host?) export warms the scene image before deferred embeds open — wired to float-bubble hover/focus and to data-perspective-popup / data-perspective-slider trigger elements. Requests are deduped page-wide; widget/fullpage already fetch at mount, in parallel with the iframe.

Why

The previous skeleton reproduced the interview's welcome card, message lines, and input pill — each a moving target that drifted out of sync with the app. This version renders only stable, brand-owned elements: the scene the research actually uses, the card treatment, and the logo animation, all sourced from the app itself.

Layout

The loading state lives in the host page DOM (overlay sibling of the cross-origin iframe), so responsiveness is a CSS container query on the consumer's slot — not a viewport media query. At the app's own 672px breakpoint the card switches between a centered box (desktop) and full-bleed (mobile / slider / popup / float); the vertical inset uses percentage inset on the absolutely-positioned wrapper so it tracks the slot's height.

API

• LoadingOptions gains optional researchId and host (used to build the scene URL); all five embed types pass them automatically.
• prefetchSceneImage(researchId, host?) is exported for consumers who want to warm the scene themselves.
• LoadingOptions.appearance (hideBranding/hideProgress/hideGreeting) is kept as a deprecated, ignored field so existing TypeScript callers keep compiling — no breaking changes.

Testing

• packages/sdk unit suite: 418 passed (loading tests rewritten: structure, CSS keyframe animation on the LogoSymbol timing with the 0.75s right-side offset and no SMIL nodes, scene URL construction/encoding, prefetch dedup — including float-bubble hover triggering it — color fallbacks, container-query scoping, deprecated appearance accepted-and-ignored).
• Typecheck, oxlint, prettier: clean.
• Verified visually in a real browser: scene + centered frosted card + animated mark on desktop, full-bleed dark panel on mobile, solid-color fallback when the scene 404s; the mark verified animating with prefers-reduced-motion: reduce emulated.
• The scene endpoint's negative path was verified against staging (404 + max-age=60 when no scene is set).

Changeset

@perspective-ai/sdk — minor (new loading design; additive LoadingOptions fields and prefetchSceneImage export).

🤖 Generated with Claude Code